<template>
  <v-card>
    <v-card-title class="align-start flex p-5">
      <sdao2 />
      <v-spacer />

      <v-btn small icon flat class="me-n3 mt-n1">
        <v-icon color="#736B7D">mdi-dots-vertical</v-icon>
      </v-btn>
    </v-card-title>

    <v-card-text class="text-no-wrap text--primary">
      <p class="font-semibold text-sm mb-1 text-[#736B7D]">
        {{ statTitle }}
      </p>

      <div class="d-flex align-end flex-wrap">
        <span class="font-semibold text-2xl mb-3 text-[#736B7D]">
          {{ token }}
        </span>
      </div>
      <div class="flex flex-row items-center">
        <span class="text-sm text-[#9C99A3] mb-0">
          {{ subtitle }}
        </span>
        <v-chip
          small
          :color="chipColor"
          class="v-chip-light-bg font-semibold text-[#8B8D92] text-[16px] ml-3"
          :class="`${chipColor}--text`"
          @click="importToken"
        >
          {{ t('message.dashboard.import') }}
        </v-chip>
        <metamask class="inline ml-1" />
      </div>
    </v-card-text>
  </v-card>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

import sdao2 from '@/icons/sdao2.svg?component';
import metamask from '@/icons/metamask.svg?component';
import WalletStore from '@/store/WalletStore';
import Dialog from '@/components/dialog/dialog';

interface TokenProps {
  token: number;
}

const props = withDefaults(defineProps<TokenProps>(), {
  token: 0,
});

const { token } = toRefs(props);

const tokenOptions = {
  statTitle: 'SDAO Token',
  color: 'info',
  subtitle: 'Total',
  chipColor: '#9155fd',
};

const { statTitle, subtitle, chipColor } = tokenOptions;
const { t } = useI18n();

const walletStore = WalletStore();

const importToken = () => {
  const { _provider } = storeToRefs(walletStore);
  if (_provider.value === undefined) {
    Dialog(t('message.dashboard.reward.connect'));
    return;
  }
  // 添加sdo代币
  // @ts-ignore
  _provider.value
    .send('wallet_watchAsset', {
      type: 'ERC20',
      options: {
        address: '0xCF01058d84d3429cbfB3e09582aA2873511C7c1C',
        symbol: 'SDAO',
        decimals: 8,
        image: 'https://bscscan.com/images/main/empty-token.png',
      },
    })
    .then(async success => {
      console.log('withdraw res:', success);
      if (success) {
        console.log('SDAO token added to wallet success');
      } else {
        throw new Error('SDAO token added to wallet went wrong.');
      }
    })
    .catch((err: any) => {
      console.error(err);
      const { message } = err;
      Dialog(message || err);
    });
};
</script>

<style lang="scss" scoped>
.percentage {
  top: -8px;
  position: relative;
}
</style>
